<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css">
	<link rel="stylesheet" href="<%=basePath %>css/mystyle.css">
	<link rel="stylesheet" href="<%=basePath %>css/style.css">
	<title></title>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<div class="inner ">
			<div class="container">
				<div class="inner-header" style="margin-top:20px">
					<div class="row">
						<div class="span3">
							<img src="img/logo.png" alt="" style="margin-left:30px">
							<a style="display:inline;font-weight: bold;font-size:20px;color:#fff">
								客户关系管理
							</a>
						</div>
						<div class="span6" style="margin:0px">
							<button class="btn btn-info" style="margin-top:0px;padding:4px 10px;font-size:12px">
								<img src="img/plus.png" alt="">
								添加新客户
							</button>
							<button class="btn btn-info" style="margin-top:0px;padding:4px 10px;font-size:12px">
								<img src="img/plus.png" alt="">
								添加新任务
							</button>
						</div>

						<ul class="nav pull-right">
	
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="#">
									用户设置
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">a</a>
									</li>
									<li>
										<a href="#">b</a>
									</li>
									<li>
										<a href="#">c</a>
									</li>
								</ul>
							</li>

							<li>
							<a href="#">退出</a>
							</li>
						
						</ul>
					</div>
					
					
				</div>
				
			</div>
		</div>
	</div>

	<div class="container" style="margin-top:100px">
		<div class="row">
			<div class="span3">
				<div style="margin-top:30px">
					<ul class="nav nav-list">
						<li >
							<a href="#" >
								<img src="img/home-active.png" alt="" >
								最新动态
							</a> 
						</li >
						<li class="active">
							<a href="#">
								<img src="img/contacts-active.png" alt="">
								客户
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/task.png" alt="">
								任务
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/deals.png" alt="">
								交易
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/gift.png" alt="">
								纪念日
							</a>
						</li>
					</ul>
				</div>
				<hr>
			</div>
			<div class="span12" style="margin:0px">

				<div class="well">
					<div class="header">
						<h4 style="display:inline" id="way">所有的客户和公司</h4>
						<a href="javascript:;" id= "change-view">改变浏览方式</a>

						<div id="views" style="display:none">
							<select id="select">
								<optgroup label="所有...">
									<option selected="selected">所有的客户和公司</option>
									<option >所有的个人</option>
									<option >所有的公司</option>
									<option >我创建的联系人</option>
								</optgroup>
								<optgroup label="最近...">
									<option >最近添加的联系人</option>
								</optgroup>
							</select>
							<a href="javascript:;" id="cancel">取消</a>
						</div>
						
					</div>
					<div class="row">
						<div class="span9">
							<div class="liner">
								heheheh
							</div>
						</div>
						<div class="span3" style="margin-left:0px;border-left: 1px solid #CCCCCC;width:237px">
							<div class="right-liner">
								<h6 class="timeline">轻松导入导出</h6>
								<span >
									<a href="#">导入</a>或
									<a href="#">导出</a>你的客户资料
								</span>

								<h6 class="timeline">通过标签浏览</h6>
								<span >
									<a href="#" class="tag">不错</a>
									<hr>
									<a href="#" class="tag">重要客户</a>
								</span>


							</div>
						</div>

					</div>
					
					
				</div>
				
			</div>
			
		</div>
	</div>

	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){

			
			$("#change-view").click(function(){
				$("#views").show();
				$("#way").hide();
				$(this).hide();
			});

			//当select的值改变时引发的事件
			$("#select").change(function(){
				var v = $("#select").val();

				$("#views").hide();

				$("#way").html(v);
				$("#way").show();
				$("#change-view").show();
			});

			$("#cancel").click(function(){
				
				$("#views").hide();
				$("#way").show();
				$("#change-view").show();

			});
		});
	</script>
</body>
</html>